//点击开始进入
var startBtn = document.getElementsByClassName("startBtn");
var Divs = document.getElementsByTagName("div");
//统计移动步数
var step = 0;

startBtn = startBtn[0];
//利用绝对定位将两个 div 重合
Divs[0].style.left = Divs[1].offsetLeft + "px";

startBtn.onclick = function(){
	s1 = s2 = 0;
	step = 0;
	Divs[0].style.display = "none";
	disarrange();
	timedCount();
}

/*
移动逻辑：所有的图片是可以拖拽的
	1：将所有的图片变成定位布局
		1.1：获取li元素
		1.2：获取li元素当前位置,放到数组里面
		1.3：把li元素改成定位
		1.4：设置位置属性值：left top
	2.每个li元素实现拖拽
		元素的现在X位置 = 元素原来的位置 + x2 - x1
		元素的现在y位置 = 元素原来的位置 + y2 - y1

		2.1:获取元素原来的位置
		2.2:获取鼠标点击的位置x1,y1
			获取鼠标移动的位置x2,y2
		2.3获取元素移动的位置
		2.4计算元素的新位置
	3.元素可以交换

*/

// 1：将所有的图片变成定位布局
var aLi = document.getElementsByTagName("li");
var aliOffset = [];
for(let i = 0 , len = aLi.length ; i < len ; i++){
	aliOffset.push([aLi[i].offsetTop,aLi[i].offsetLeft,i]);

	setTimeout(function(){
		aLi[i].style.position = 'absolute';
		aLi[i].style.top = aliOffset[i][0] + 'px';
		aLi[i].style.left = aliOffset[i][1] + 'px';
		aLi[i].style.margin = 0;
	},0);
}

//2.每个li元素实现拖拽
var oPhoto = document.getElementsByClassName("photo")[0];
oPhoto.addEventListener("mousedown",drag);
oPhoto.addEventListener("mousemove",drag);
oPhoto.addEventListener("mouseup",drag);
oPhoto.addEventListener("touchstart",drag);
oPhoto.addEventListener("touchmove",drag);
oPhoto.addEventListener("touchend",drag);

var data={
	toggle:false,//是否点中元素了
	ele:"",//当前选中元素
	startX:0,
	startY:0,
	clickX:0,
	clickY:0,
	moveX:0,
	moveY:0,
	trigger:"",
	z : 1,
	clickindex: 0,
	exchangedindex: 0,
}

function drag (e) {
	var e = window.event;
	e.preventDefault();
	switch (e.type) {
		case "mousedown":
			if (e.target.parentNode.tagName === "LI") {
				data.toggle = true;
				data.ele = e.target.parentNode;
				//2.1:获取元素原来的位置
				data.startX = data.ele.offsetLeft;
				data.startY = data.ele.offsetTop;
				//2.2:获取鼠标点击的位置
				data.clickX = e.clientX;
				data.clickY = e.clientY;
			}
			break;
		case "mousemove":
			if (data.toggle) {
				//2.3获取元素移动的位置
				data.moveX = e.clientX;
				data.moveY = e.clientY;
				var xOffset = data.startX + data.moveX - data.clickX;
				var yOffset = data.startY + data.moveY - data.clickY;
				
				//2.4:给元素设置新位置
				data.ele.style.left = xOffset + "px";
				data.ele.style.top = yOffset + "px";
				data.ele.style.zIndex = data.z;

				//相对距离
				var xR = data.moveX - oPhoto.offsetLeft;
				var yR = data.moveY - oPhoto.offsetTop;
				for(var n = 0, len = aLi.length ; n < len ; n++){
					aLi[n].style.transform = "";
					aLi[n].style.boxShadow = "";
					if (
						data.ele != aLi[n] &&
						xR >= aLi[n].offsetLeft &&
						xR <= (aLi[n].offsetLeft + 200) &&
						yR >= aLi[n].offsetTop &&
						yR <= (aLi[n].offsetTop + 150)
						) {
							aLi[n].style.transform = "scale(1.05)";
							aLi[n].style.boxShadow = "0px 0px 5px #ff9900";
							data.trigger = aLi[n];
							data.z++;
							data.exchanged = n;
							break;
					}
					else {
						data.trigger = "";
					}
				}
			}
			break;
		case "mouseup":
			data.toggle = false;
			
			if (data.trigger) {
				data.ele.style.left = data.trigger.offsetLeft + "px";
				data.ele.style.top = data.trigger.offsetTop + "px";
				data.trigger.style.left = data.startX + "px";
				data.trigger.style.top = data.startY + "px";
				data.trigger.style.transform = "";
				data.trigger.style.boxShadow = "";
				setTimeout(function(){
					if(judgePosition()){
						// alert('you win!');
						stepCount();
						Divs[0].style.display = "block";
					}
				},100);
				step++;
			}
			else {
				data.ele.style.left = data.startX + "px";
				data.ele.style.top = data.startY + "px";
			}
			data.ele = "";
			break;
		case "touchmove":
			//touchstart || touchmove || touchend
			break;
	}
	return false;
}

/*
拼图逻辑：所有的图片都有它正确的位置
	1.记录下所有图片原来的位置
		1.1读取所有li
		1.2保存每个li标号 offsetTop offsetLeft(已存 aliOffset[])
	2.将所有图片打乱
		2.1每次生成 0-8 随机数
		2.2将每个li与第随机数块交换位置
	3.判断图片是否归位
		3.1每次移动后判断当前数组里的标号是否与正确顺序里的标号相同
			3.1.1将当前列表里的所有li的offsetTop、offsetleft 与 正确值作比较

*/

// 1.记录下所有图片原来的位置 (done)

// 2.将所有图片打乱
function disarrange(){
	// 2.1每次生成 0-8 随机数
	var randNum;
	var data = {
		offsetTop: 0,
		offsetLeft: 0
	};
	// 2.2将每个li与第随机数块交换位置
	/*
	!!!顺序打乱后,li在ul里顺序还是没变,只是位置发生改变	
	*/
	for(var i = 0,len = aliOffset.length ; i < len ; i++){
		randNum = Math.random()*9 | 0;
		data.offsetTop = aLi[i].offsetTop;
		data.offsetLeft = aLi[i].offsetLeft;
		aLi[i].style.top = aLi[randNum].offsetTop + "px";
		aLi[i].style.left = aLi[randNum].offsetLeft + "px";
		aLi[randNum].style.top = data.offsetTop + "px";
		aLi[randNum].style.left = data.offsetLeft + "px";
	}
}

// 3.判断图片是否归位
function judgePosition(){
	for(var i = 0,len = aLi.length ; i < len ; i++){
		if(aLi[i].offsetTop != aliOffset[i][0] ||
		aLi[i].offsetLeft != aliOffset[i][1]){
			return false;
		}
	}
	return true;
}

/*
设置成绩系统
	1.时间
		1.1点击start后开始计时
		1.2完成最后一块拼图时计时结束
		1.3屏幕上的时间随着时间变化而刷新
	2.统计步数
*/
var s1=0,s2=0;
var t;
function timedCount()
{
	document.getElementById('time').innerHTML = s1 + '.' + s2 + 's';
	document.getElementById('steps').innerHTML = step;
	s2=(s2+1)%100;
	if (!(s2 % 100)) {
		s1++;
	}
	t=setTimeout("timedCount()",10);
}

function stepCount()
{	
	setTimeout(function(){
		document.getElementById('time').innerHTML = s1 + '.' + s2 + 's';
	},0);
	clearTimeout(t);
}